<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="新闻详情"
      left-text="返回"
      left-arrow
      @click-left="clickLeft"
    />
    <!-- 新闻详情 -->
    <div>
      <div class="header">
        <h1>{{ newsInfo.title }}</h1>
        <p>
          <span>发布时间:{{ newsInfo.add_time | fmt }}</span>
          <span>{{ newsInfo.click }}次浏览</span>
        </p>
      </div>
      <div class="main" v-html="newsInfo.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsInfo: {},
    };
  },
  methods: {
    clickLeft() {
      // 点击按钮以后返回到上一个页面
      // this.$router.push({ path:'/home' })
      this.$router.go(-1);
    },
    getNewsInfo(newsid) {
      this.$http
        .get("http://210.21.98.31:6007/api/getnew/" + newsid)
        .then((res) => {
          let obj = res.data.message && res.data.message[0];
          this.newsInfo = obj;
        });
    },
  },
  mounted() {
    // 获取到url参数传入到方法中
    this.getNewsInfo(this.$route.params.id);
  },
};
</script>

<style scoped>
.header {
  margin: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.header h1 {
  color: #0088d1;
  font-size: 1rem;
  margin: 0 10px;
}

.header p {
  font-size: 12px;
  color: #999;
  margin: 10px 10px;
}

.header p span:last-child {
  margin-left: 10px;
}

.main {
  padding: 5px;
  font-size: 0.8rem;
  color: #5c5c5c;
}
</style>
